Ext.onReady(
	function() {
		
		var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
		var userRegForm = Ext.create('Ext.form.FormPanel',{
			title:'user register',
			frame:true,
			collapsible: true,
			bodyPadding: '5 5 0',
			height:300,
			width:300,
        	fieldDefaults: {
	            msgTarget: 'side',
	            labelWidth: 75
       		},
			defaults:{
				labelSeparator:' : '
			},
//			renderTo:Ext.getBody(),
            items: [{
            		xtype:'textfield',
                    fieldLabel: 'name',
                    name: 'name',
                    afterLabelTextTpl: required,
                    allowBlank: false,
                    toolTips:'enter your name'
                },{
                	id:'password',
                	xtype:'textfield',
                    fieldLabel: 'password',
                    name: 'password',
                    inputType:'password',
                    vtype:'alphanum',
                    afterLabelTextTpl: required,
                    allowBlank: false,
                    toolTips:'enter your password'
                },{
                	id:'vpassword',
                	xtype:'textfield',
                	initialPassField : 'password',
                    fieldLabel: 'pwdValidate',
                    name: 'pwdValidate',
                    inputType:'password',
                    afterLabelTextTpl: required,
                    allowBlank: false,
                    toolTips:'repeat your password',
                    validator: function(value) {
		                var password = this.previousSibling('[name=password]');
		                return (value === password.getValue()) ? true : 'Passwords do not match.'
            		}//end of validator
                },{
                	xtype:'radiogroup',
                    fieldLabel: 'gender',
                    afterLabelTextTpl: required,
                    columns:2,
                    items:[
                    	{boxLabel:'male',name:'gender',inputValue:0},
                    	{boxLabel:'female',name:'gender',inputValue:1}
                    ]
                },{
                	xtype:'textfield',
                    fieldLabel: 'Email',
                    vtype:'email',
                    afterLabelTextTpl: required,
                    allowBlank: false,
                    name: 'email'
                },{
					xtype:'datefield',
					fieldLabel:'birthdate',
					name:'birthdate',
					format:'Y/m/d',
					afterLabelTextTpl: required,
                	allowBlank:false
            }],
       		buttons:[{
		            text: 'GO',
		            handler: function() {
		                userRegForm.getForm().submit({
		                	clientValidation:true,
		                	url:'UserRegServlet',
		                	method:'POST',
		                	success:function(form,action) {
		                		Ext.Msg.alert('success','register success.you can login now');
								Ext.getCmp('regWin').hide();
								userRegForm.getForm().reset();
		                		},
		                	failure:function(form,action) {
		                		Ext.Msg.alert('fail','sorry,register fail-'+action.failureType);
		                	}
		                });//end of submit
		            }
	        		},{
		            text: 'Cancel',
		            handler: function() {
   						userRegForm.getForm().reset();
        			}
    		}]//end of buttons
		})//end of userRegForm
		
		var userLoginForm = Ext.create('Ext.form.FormPanel',{
			title:'user login',
			frame:true,
			collapsible: true,
			bodyPadding: '5 5 0',
			height:300,
			width:300,
        	fieldDefaults: {
	            msgTarget: 'side',
	            labelWidth: 75
       		},
			defaults:{
				labelSeparator:' : '
			},
			defaultType:'textfield',
			items:[{
				xtype:'textfield',
				fieldLabel:'email',
				name:'email',
				vtype:'email',
                afterLabelTextTpl: required,
                allowBlank: false,
                toolTips:'enter your name'
			},{
				xtype:'textfield',
				fieldLabel:'password',
				name:'password',
				inputType:'password',
                afterLabelTextTpl: required,
                allowBlank: false,
                toolTips:'enter your password'
			}],
			buttons:[{
				text:'Login',
				handler:function() {
	                userLoginForm.getForm().submit({
	                	clientValidation:true,
	                	url:'UserLoginServlet',
	                	method:'POST',
	                	success:function(form,action) {
	                		Ext.Msg.alert('success','login success!');
							Ext.getCmp('regWin').hide();
							userLoginForm.getForm().reset();
	                		},
	                	failure:function(form,action) {
	                		Ext.Msg.alert('fail','sorry,login fail-'+action.failureType);
	                	}
	                });//end of submit
				}
			},{
				text:'cancel',
				handler:function() {
					userLoginForm.getForm().reset();
				}
			}]
		});//end of userLoginForm
		
		var regWin = Ext.create('Ext.window.Window', {
			id:'regWin',
			height:400,
		    width: 350,
		    layout: 'fit',
		    closeAction:'hide',//default is 'destroy','hide' prop will waste browser's mem
			items:[userRegForm]
		});//end of regWin
		
		var loginWin = Ext.create('Ext.window.Window', {
			id:'loginWin',
			height:400,
		    width: 350,
		    layout: 'fit',
		    closeAction:'hide',//default is 'destroy','hide' prop will waste browser's mem
			items:[userLoginForm]
		});//end of loginWin
		
	  	var mainPanel = Ext.widget('panel', {
	      renderTo: Ext.getBody(),
	      title: 'Welcome!',
	      width: 500,
	      bodyPadding: 20,
	      items: [{
		      margin: '0 0 20 0',
		      xtype: 'component',
		      html: 'Thank you for visiting our site! We welcome your feedback; please click the button below to ' +
		            'keep health forever.Just register to be our user.'
		  	  }, {
		      xtype: 'container',
		      layout: {
		          type: 'hbox',
		          pack: 'center'
		      },
		      items: [{
		      	  id:'regFormShow',
		          xtype: 'button',
		          cls: 'contactBtn',
		          scale: 'large',
		          text: 'User Register'
		      },{
		      	  id:'loginFormShow',
		          xtype: 'button',
		          cls: 'contactBtn',
		          scale: 'large',
		          text: 'User Login'
		      }]
	      }]
  		});//end of mainPanel
		
  		Ext.get('regFormShow').on('click',function() {
			regWin.show();
  		});
  		Ext.get('loginFormShow').on('click',function() {
			loginWin.show();
  		});
	}//end of totle function
)// end of Ext.onReady